<h3>Data Tables
   <small>Tables, one step forward.</small>
</h3>
<!-- Zero Configuration-->
<div class="panel panel-default">
   <div class="panel-heading">Data Tables |
      <small>Zero Configuration</small>
   </div>
   <div class="panel-body">
      <table datatable="" class="row-border hover">
         <thead>
            <tr>
               <th>Card Id</th>
               <th>First name</th>
               <th>Last name</th>
               <th>Age</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>123123123</td>
               <td>Hannah</td>
               <td>Burns</td>
               <td>26</td>
            </tr>
            <tr>
               <td>33333344444</td>
               <td>Addison</td>
               <td>Payne</td>
               <td>32</td>
            </tr>
            <tr>
               <td>9998888999</td>
               <td>Kylie</td>
               <td>Hudson</td>
               <td>100</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- ngRepeat + ngResource-->
<div class="panel panel-default">
   <div class="panel-heading">Datatables |
      <small>ngRepeat + ngResource</small>
   </div>
   <div class="panel-body">
      <div ng-controller="DataTableController">
         <table datatable="ng" class="row-border hover">
            <thead>
               <tr>
                  <th>Person ID</th>
                  <th>First Name</th>
                  <th>Last Name</th>
               </tr>
            </thead>
            <tbody>
               <tr ng-repeat="person in persons">
                  <td>{{ person.id }}</td>
                  <td>{{ person.firstName }}</td>
                  <td>{{ person.lastName }}</td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>
<!-- Chaning data-->
<div class="panel panel-default">
   <div class="panel-heading">Datatables |
      <small>Chaning data</small>
   </div>
   <div class="panel-body">
      <div ng-controller="DataTableController">
         <form ng-submit="addPerson()" class="form-inline">
            <table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
               <thead>
                  <tr>
                     <th>
                        <div class="form-group">
                           <label>
                              <input type="number" name="id" ng-model="person2Add.id" value="" class="form-control" />
                           </label>
                        </div>
                     </th>
                     <th>
                        <div class="form-group">
                           <label>
                              <input type="text" name="firstName" ng-model="person2Add.firstName" value="" class="form-control" />
                           </label>
                        </div>
                     </th>
                     <th>
                        <div class="form-group">
                           <label>
                              <input type="text" name="lastName" ng-model="person2Add.lastName" value="" class="form-control" />
                           </label>
                        </div>
                     </th>
                     <th>
                        <div class="form-group">
                           <button type="submit" class="btn btn-labeled btn-success">
                              <span class="btn-label">
                                 <em class="fa fa-plus"></em>
                              </span>Add</button>
                        </div>
                     </th>
                  </tr>
                  <tr>
                     <th>Hero ID</th>
                     <th>First Name</th>
                     <th>Last Name</th>
                     <th></th>
                  </tr>
               </thead>
               <tbody>
                  <tr ng-repeat="hero in heroes">
                     <td>{{ hero.id }}</td>
                     <td>{{ hero.firstName }}</td>
                     <td>{{ hero.lastName }}</td>
                     <td>
                        <button type="button" ng-click="modifyPerson($index)" class="btn btn-sm btn-warning">
                           <em class="fa fa-edit"></em>
                        </button>
                        <button type="button" ng-click="removePerson($index)" class="btn btn-sm btn-danger">
                           <em class="fa fa-trash-o"></em>
                        </button>
                     </td>
                  </tr>
               </tbody>
            </table>
         </form>
      </div>
   </div>
</div>